import { Input, Row, Col, Form } from 'antd';
import React, { useState, useEffect, memo } from 'react';
import '@ant-design/compatible/assets/index.css';
import styles from './AuditForms.less';
import { connect } from 'dva';

const FormItem = Form.Item
const PassengerForm = props => {
    const [remark, setRemark] = useState('');
    const [passengerData, setPassengerData] = useState({
        man_child_baby: "0/0/0", // 大人/儿童/婴儿
        totalPassenger: 0, // 总人数
        totalAmount: 0, // 补偿总金额
    });
    const mainData = props.allDatas
    const formItemLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };

    useEffect(() => {
        // withBaby 是否携带婴儿 赔付标准 10
        // isChild 是否是儿童 赔付标准 50
        
        let baseMoney = Number(props.compensationAmount.baseAmount); // 成人补偿基数
        let childMoney = Number(props.compensationAmount.childAmount); // 儿童补偿系数
        let babyMoney = Number(props.compensationAmount.babyAmount); // 婴儿补偿基数
        let howMan = 0;
        let howChild = 0;
        let howBaby = 0;
        let totalAmount = 0; //计算总金额 
        for (let passengerItem of props.passengers) {
            if (passengerItem.withBaby === "Y") howBaby += 1;
            if (passengerItem.isChild === "Y") howChild += 1;
        }
        // 自定义金额
        if (childMoney === 0) {
            totalAmount = ((props.passengers.length - howChild) + howChild) * baseMoney;
        } else {
            totalAmount = ((props.passengers.length - howChild) * baseMoney + (((howChild * childMoney) + (howBaby * babyMoney)) * baseMoney / 100)); 
        }
        setPassengerData({
            ...passengerData,
            man_child_baby: `${props.passengers.length - howChild}/${howChild}/${howBaby}`,
            totalPassenger: props.passengers.length + howBaby,
            totalAmount
        })
    }, [props.compensationAmount, props.passengers])

    useEffect(() => {
        props.dispatch({
            type: 'auditDetail/changeRemark',
            payload: { remark }
        })
    }, [remark])

    const changeRemark = (e) => {
        setRemark(e.target.value);
    }
    return (
        <div className='formItems'>
            <Form >
                <Row gutter={16}>
                    <Col md={6} >
                        <FormItem label='合计金额' >
                            <Input value={passengerData.totalAmount} disabled addonAfter="(元)" />
                        </FormItem>
                    </Col>
                    <Col md={6} >
                        <FormItem label='已选旅客'>
                            <Input value={passengerData.totalPassenger} disabled />
                        </FormItem>
                    </Col>
                    <Col md={6} >
                        <FormItem label='成/童/婴'>
                            <Input value={passengerData.man_child_baby} disabled />
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col md={24} sm={24}>
                        <FormItem label='备注'>
                            <Input.TextArea value={remark} rows={2} onChange={changeRemark} />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
    )
}
/**
 * 优化渲染
 */
function carefulRender(prevProps, nextProps) {
    if (JSON.stringify(prevProps) != JSON.stringify(nextProps)) {
        return false
    } else {
        return true
    }
}

export default memo(connect(state => state.auditDetail)(PassengerForm), carefulRender);